<template>
	<view class="waterQualityReport">
		<!-- /////////////////////////水质监测 - 基本/////////////////////////-->
		<view v-if="details != null" class="itemWar borderB20">
			<view class="item">
				<view class="baseFontLabel">报告编号：</view>
				<view class="baseFontValue">{{ details.monitorId }}</view>
			</view>
			<view class="item">
				<view class="baseFontLabel wsp">地点：</view>
				<view class="baseFontValue">{{ details.place }}</view>
			</view>
			<view class="item">
				<view class="baseFontLabel">经度：</view>
				<view class="baseFontValue">{{ details.longitude }}</view>
			</view>
			<view class="item">
				<view class="baseFontLabel">纬度：</view>
				<view class="baseFontValue">{{ details.latitude }}</view>
			</view>
		</view>
		<!-- /////////////////////////水质监测 - 水质分析检验/////////////////////////-->
		<view class="reportWar">
			<view class="titleWar">
				<view class="left"></view>
				<view class="center">水质分析检验</view>
				<view @click="ejectShow = true" class="right iconfont">&#xe647;</view>
			</view>
			<view class="tabWar">
				<view class="row tabTitle">
					<view class="item">检测时间</view>
					<view class="item">检测项目</view>
					<view class="item">检测结果</view>
					<view class="item">单位</view>
				</view>
				<view class="row" v-for="(item, index) in list" :key="index">
					<view class="item">{{ item.jcsj }}</view>
					<view class="item">{{ item.project }}</view>
					<view class="item blue">{{ item.data }}</view>
					<view class="item">{{ item.unit }}</view>
				</view>
			</view>
		</view>
		<eject :showNum="2" :show.sync="ejectShow"></eject>
	</view>
</template>

<script>
import eject from './eject.vue';
export default {
	name: 'waterQualityReport',
	data() {
		return {
			ejectShow: false
		};
	},
	props: {
		ids: {
			type: [String, Number],
			default: 0
		},
		waterQualityData: {
			type: [Object, Array],
			default: () => {
				return null;
			}
		}
	},
	computed: {
		details: function({ waterQualityData }) {
			let value = null;
			if (waterQualityData != null) {
				value = waterQualityData.top;
			}
			return value;
		},
		list: function({ waterQualityData }) {
			let value = null;
			if (waterQualityData != null) {
				value = waterQualityData.waterTestList;
			}
			return value;
		}
	},

	methods: {},
	components: {
		eject
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
.waterQualityReport {
	/* ----------------------水质监测 - 第四格式---------------------- */
	.itemWar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		min-height: 100rpx;
		padding: 38rpx 41rpx 35rpx 41rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		// background-color: #e8f0f6;
		.item {
			width: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			margin-top: 39rpx;
		}
		.item:nth-child(2n) {
			width: 260rpx;
			min-width: 260rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
		}
		.item:nth-child(1),
		.item:nth-child(2) {
			margin-top: 0;
		}
	}
	.reportWar {
		.titleWar {
			@include titleWar();
			font-size: 48rpx;
			font-weight: 700;
			background-color: #e8f0f6;
			padding: 51rpx 67rpx;
		}
	}
	.tabWar {
		@include ejectList(4);
	}
}
</style>
